<template>
  <div style="height: 100%;height: 500px">
    <div :id="idName" class="box" style="width: 80%; height: 75%" />
  </div>
</template>
<script>
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
  props: {
    info: {
      type: Object,
      default: {},
    },
    idName: {
      type: String,
      default: ''
    }
  },
  watch: {
    info:{
      deep: true,
      handler: function(val) {
        this.initCharts()
      }
    }
  },
  mounted() {
    // console.log(this.info)
    // this.initCharts()
  },
  methods: {
    initCharts() {
      const {data,cursor,title} = this.info
      const dom = document.getElementById(this.idName)
      /**
       * data 图表数据
       * dom  图表元素
       * cursor  是否有点击事件
       * title  标题
       */
      echarts.init(dom).setOption(
        {
          title: {
            text: title,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
            show: false,
          },
          grid: {
            left: "0%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "value",
              boundaryGap: [0, 0.01],
            },
          ],
          yAxis: {
            type: "category",
            inverse: true,
            data: data.categories,
            axisLabel: {
              //坐标轴刻度标签的相关设置。
              formatter: function (params) {
                var newParamsName = ""; // 最终拼接成的字符串
                var paramsNameNumber = params.length; // 实际标签的个数
                var provideNumber = 8; // 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = ""; // 表示每一次截取的字符串
                    var start = p * provideNumber; // 开始截取的位置
                    var end = start + provideNumber; // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr; // 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params;
                }
                //将最终的字符串返回
                return newParamsName;
              },
            },
          },
          series: [
            {
              name: data.series[0].name,
              type: "bar",
              data: data.series[0].data,
              itemStyle: {
                color: "rgba(84,112,198,1)",
              },
              cursor: cursor || "pointer",
            },
            {
              name: data.series[1].name,
              type: "bar",
              data: data.series[1].data,
              itemStyle: {
                color: "rgba(238,102,102,1)",
              },
              cursor: cursor || "pointer",
            },
          ],
        },
        true
      );
      let myChart = echarts.init(dom);
      myChart.off("click");
      // myChart.clear()
      this.autoHeight = data.categories.length * 55 + 50;
      if (this.autoHeight < 200) {
        this.autoHeight = 200;
      }
      if (this.autoHeight < 500) {
        myChart.getDom().parentNode.style.height = this.autoHeight + "px";
      }
      myChart.getDom().style.height = this.autoHeight + "px";
      myChart.resize();
      if (cursor === "auto") return;
      myChart.getZr().off('click')
      myChart.getZr().on("click", (params) => {
        const pointInPixel = [params.offsetX, params.offsetY];
        if (myChart.containPixel("grid", pointInPixel)) {
          let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [
            params.offsetX,
            params.offsetY,
          ]);
          this.handleNext(data.categories[parseInt(xIndex[1])]);
        }
      });
    },
    handleNext(data) {
      this.$emit('handleClickLine',data)
    },
  },
};
</script>
<style lang="scss" scoped>
</style>